<template>
  <div class="history-page">
    <!-- 动态气泡背景 -->
    <div class="bubbles">
      <div class="bubble bubble-1"></div>
      <div class="bubble bubble-2"></div>
      <div class="bubble bubble-3"></div>
      <div class="bubble bubble-4"></div>
      <div class="bubble bubble-5"></div>
      <div class="bubble bubble-6"></div>
    </div>

    <!-- 主内容区域 -->
    <div class="content">
      <div class="header">
        <div class="title">
          <span class="title-emoji">🕰️</span>
          <span>历史记录</span>
        </div>
        <div class="actions">
          <div class="show-all" @click="showAllHistory">
            <span class="icon">📋</span>
            <span>显示全部</span>
          </div>
          <div class="search-box">
            <input
              type="text"
              v-model="searchKeyword"
              placeholder="搜索历史记录"
              @input="searchHistories"
            />
            <span class="search-icon">🔍</span>
          </div>
          <div class="clear-all" @click="showClearConfirm = true">
            <span class="icon">🗑️</span>
            <span>清空历史</span>
          </div>
        </div>
      </div>

      <div class="body">
        <!-- 时间轴 -->
        <div class="timeline">
          <div
            class="time-item"
            :class="{ active: currentTimeFilter === 'all' }"
            @click="filterByTime('all')"
          >
            <span class="time-dot"></span>
            <span class="time-text">全部</span>
          </div>
          <div
            class="time-item"
            :class="{ active: currentTimeFilter === 'today' }"
            @click="filterByTime('today')"
          >
            <span class="time-dot"></span>
            <span class="time-text">今天</span>
          </div>
          <div
            class="time-item"
            :class="{ active: currentTimeFilter === 'yesterday' }"
            @click="filterByTime('yesterday')"
          >
            <span class="time-dot"></span>
            <span class="time-text">昨天</span>
          </div>
          <div
            class="time-item"
            :class="{ active: currentTimeFilter === 'recent_week' }"
            @click="filterByTime('recent_week')"
          >
            <span class="time-dot"></span>
            <span class="time-text">近一周</span>
          </div>
          <div
            class="time-item"
            :class="{ active: currentTimeFilter === 'one_week_ago' }"
            @click="filterByTime('one_week_ago')"
          >
            <span class="time-dot"></span>
            <span class="time-text">一周前</span>
          </div>
        </div>

        <!-- 历史记录列表 -->
        <div class="history-list">
          <div v-if="isShowingAll" class="all-histories">
            <div class="all-header">
              <span class="all-emoji">🎬</span>
              <span>全部历史记录</span>
              <span class="all-count">{{ historyVideos.length }}条</span>
            </div>
            <div class="video-grid">
              <div
                v-for="(video, index) in historyVideos"
                :key="index"
                class="video-item"
                :class="{ 'anime-pop-in': true }"
                :style="{ animationDelay: (index % 20) * 0.05 + 's' }"
              >
                <div class="video-cover" @click="goToVideo(video.videoId)">
                  <img :src="getKawaiiCover(index)" alt="视频封面" />
                  <div class="video-duration">{{ video.duration }}</div>
                  <div class="play-btn">
                    <span class="play-icon">▶</span>
                  </div>
                </div>
                <div class="video-info">
                  <div class="video-title" @click="goToVideo(video.videoId)">
                    {{ video.title }}
                  </div>
                  <div class="video-data">
                    <span class="video-author">{{ video.upName }}</span>
                    <span class="video-time">{{ video.watchTime }}观看</span>
                  </div>
                </div>
                <div class="delete-btn" @click="deleteHistory(video.videoId)">
                  <span class="delete-icon">✖</span>
                </div>
              </div>
            </div>
          </div>

          <div
            v-if="!isShowingAll"
            v-for="(timeGroup, timeLabel) in groupedVideos"
            :key="timeLabel"
            class="time-group"
          >
            <div class="time-label">
              <span class="label-emoji">
                {{ getTimeEmoji(timeLabel) }}
              </span>
              {{ timeLabel }}
            </div>
            <div class="video-grid">
              <div
                v-for="(video, index) in timeGroup"
                :key="index"
                class="video-item"
                :class="{ 'anime-pop-in': true }"
                :style="{ animationDelay: index * 0.1 + 's' }"
              >
                <div class="video-cover" @click="goToVideo(video.videoId)">
                  <img :src="getKawaiiCover(index)" alt="视频封面" />
                  <div class="video-duration">{{ video.duration }}</div>
                  <div class="play-btn">
                    <span class="play-icon">▶</span>
                  </div>
                </div>
                <div class="video-info">
                  <div class="video-title" @click="goToVideo(video.videoId)">
                    {{ video.title }}
                  </div>
                  <div class="video-data">
                    <span class="video-author">{{ video.upName }}</span>
                    <span class="video-time">{{ video.watchTime }}观看</span>
                  </div>
                </div>
                <div class="delete-btn" @click="deleteHistory(video.videoId)">
                  <span class="delete-icon">✖</span>
                </div>
              </div>
            </div>
          </div>

          <!-- 空状态 -->
          <div
            v-if="Object.keys(groupedVideos).length === 0 && !isShowingAll"
            class="empty-history"
          >
            <div class="empty-icon">
              <span class="empty-emoji">🙀</span>
            </div>
            <p class="empty-text">暂无历史记录</p>
            <p class="empty-subtext">快去看喜欢的动漫吧~</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 清空确认对话框 -->
    <el-dialog
      v-model="showClearConfirm"
      title="确认清空"
      width="30%"
      class="clear-dialog"
    >
      <div class="dialog-content">
        <p class="warning-text">确定要清空全部历史记录吗？此操作不可恢复！</p>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showClearConfirm = false" class="cancel-btn">
            取消
          </el-button>
          <el-button type="danger" @click="clearAllHistory" class="confirm-btn">
            确定清空
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

interface HistoryVideo {
  videoId: string
  cover: string
  title: string
  upName: string
  views: string
  duration: string
  watchTime: string
  timeType: 'today' | 'yesterday' | 'recent_week' | 'one_week_ago'
}

// 模拟历史记录数据
const historyVideos = ref<HistoryVideo[]>([
  {
    videoId: '1001',
    cover: '/src/assets/anime/images/banner1.png',
    title: '【鬼灭之刃】炎柱VS上弦之叁「猗窝座」战斗作画集锦 燃炸了',
    upName: '二次元动漫控',
    views: '12.5万',
    duration: '12:11',
    watchTime: '今天 18:30',
    timeType: 'today',
  },
  {
    videoId: '1002',
    cover: '/src/assets/anime/images/banner2.png',
    title: '【进击的巨人】最终季精彩打斗作画集锦 艾伦VS战锤巨人',
    upName: '进击的阿尼酱',
    views: '8.2万',
    duration: '07:04',
    watchTime: '今天 16:42',
    timeType: 'today',
  },
  {
    videoId: '1003',
    cover: '/src/assets/anime/images/banner3.png',
    title: '【咒术回战】五条悟最强场面集锦！无下限术式，让对手窒息的强大',
    upName: '咒术动漫屋',
    views: '5.3万',
    duration: '08:49',
    watchTime: '昨天 19:15',
    timeType: 'yesterday',
  },
  {
    videoId: '1004',
    cover: '/src/assets/anime/images/banner4.png',
    title: '【间谍过家家】阿尼亚可爱瞬间合集，喜欢这个小萝莉吗？',
    upName: '阿尼亚的花生',
    views: '13.3万',
    duration: '13:23',
    watchTime: '昨天 14:30',
    timeType: 'yesterday',
  },
  {
    videoId: '1005',
    cover: '/src/assets/anime/images/banner5.png',
    title: '【海贼王】路飞五档终极形态战斗合集，超燃！',
    upName: '梅隆肉OnePiece',
    views: '7.9万',
    duration: '01:39',
    watchTime: '3天前 20:11',
    timeType: 'recent_week',
  },
  {
    videoId: '1006',
    cover: '/src/assets/anime/images/banner6.png',
    title: '【鬼灭之刃】无限列车篇精彩场景！炼狱杏寿郎的炎之呼吸',
    upName: '炎柱后援会',
    views: '18.1万',
    duration: '10:04',
    watchTime: '4天前 12:20',
    timeType: 'recent_week',
  },
  {
    videoId: '1007',
    cover: '/src/assets/anime/images/banner7.png',
    title: '【JOJO的奇妙冒险】荒木飞吕彦天才作画集，黄金之风精彩瞬间',
    upName: 'JOJO立',
    views: '6.5万',
    duration: '09:40',
    watchTime: '5天前 09:25',
    timeType: 'recent_week',
  },
  {
    videoId: '1008',
    cover: '/src/assets/anime/images/banner8.png',
    title: '【国漫崛起】十大必看国产动画推荐！中国动画发展史',
    upName: '国漫推荐官',
    views: '128.9万',
    duration: '23:45',
    watchTime: '8天前 21:30',
    timeType: 'one_week_ago',
  },
  {
    videoId: '1009',
    cover: '/src/assets/anime/images/banner9.png',
    title: '【辉夜大小姐想让我告白】石上优秀名场面，藤原书记卖萌合集',
    upName: '辉夜大人',
    views: '89.4万',
    duration: '01:01:23',
    watchTime: '10天前 18:15',
    timeType: 'one_week_ago',
  },
  {
    videoId: '1010',
    cover: '/src/assets/anime/images/banner10.png',
    title: '【一拳超人】埼玉老师认真系列名场面！无敌真的很寂寞',
    upName: '秃头披风侠',
    views: '143.7万',
    duration: '04:23',
    watchTime: '13天前 22:40',
    timeType: 'one_week_ago',
  },
])

// 获取封面图片路径
const getKawaiiCover = (index: number): string => {
  const bannerNumber = (index % 16) + 1
  return `/src/assets/anime/images/banner${bannerNumber}.png`
}

// 根据时间标签获取对应的emoji
const getTimeEmoji = (timeLabel: string): string => {
  switch (timeLabel) {
    case '今天':
      return '🌟'
    case '昨天':
      return '🌙'
    case '本周':
      return '📅'
    case '一周前':
      return '📆'
    default:
      return '🕰️'
  }
}

// 搜索关键词
const searchKeyword = ref('')
// 当前时间筛选类型
const currentTimeFilter = ref('all')
// 显示清空确认弹窗
const showClearConfirm = ref(false)
// 是否显示全部历史记录
const isShowingAll = ref(false)

// 根据搜索关键词和时间筛选视频
const filteredVideos = computed(() => {
  let result = historyVideos.value

  // 时间筛选
  if (currentTimeFilter.value !== 'all') {
    result = result.filter(
      (video) => video.timeType === currentTimeFilter.value,
    )
  }

  // 关键词搜索
  if (searchKeyword.value) {
    const keyword = searchKeyword.value.toLowerCase()
    result = result.filter(
      (video) =>
        video.title.toLowerCase().includes(keyword) ||
        video.upName.toLowerCase().includes(keyword),
    )
  }

  return result
})

// 根据观看时间分组视频
const groupedVideos = computed(() => {
  const groups: { [key: string]: HistoryVideo[] } = {}

  filteredVideos.value.forEach((video) => {
    const timeLabel = getTimeGroupLabel(video.timeType)

    if (!groups[timeLabel]) {
      groups[timeLabel] = []
    }
    groups[timeLabel].push(video)
  })

  return groups
})

// 获取时间分组标签
const getTimeGroupLabel = (timeType: string): string => {
  switch (timeType) {
    case 'today':
      return '今天'
    case 'yesterday':
      return '昨天'
    case 'recent_week':
      return '本周'
    case 'one_week_ago':
      return '一周前'
    default:
      return '更早'
  }
}

// 按时间筛选
const filterByTime = (timeType: string) => {
  currentTimeFilter.value = timeType
  isShowingAll.value = false
}

// 显示全部历史记录
const showAllHistory = () => {
  isShowingAll.value = true
  currentTimeFilter.value = 'all'
}

// 搜索历史记录
const searchHistories = () => {
  // 搜索逻辑已通过计算属性实现
  console.log('搜索关键词:', searchKeyword.value)
}

// 删除单条历史记录
const deleteHistory = (videoId: string) => {
  historyVideos.value = historyVideos.value.filter(
    (video) => video.videoId !== videoId,
  )
}

// 清空所有历史记录
const clearAllHistory = () => {
  historyVideos.value = []
  showClearConfirm.value = false
}

// 跳转到视频详情页面
const goToVideo = (videoId: string) => {
  router.push(`/video/detail/${videoId}`)
}

onMounted(() => {
  // 实际项目中这里应该调用API获取历史记录数据
  console.log('历史记录页面加载完成')
})
</script>

<style lang="scss" scoped>
.history-page {
  min-height: 100vh;
  position: relative;
  padding: 20px;
  background: linear-gradient(135deg, #ffe6ea 0%, #ffccd5 100%);
  overflow: hidden;
  z-index: 1;
  width: 90%;
  margin: 0 auto;

  // 动态气泡背景
  .bubbles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;

    .bubble {
      position: absolute;
      background: linear-gradient(135deg, #ffd1dc 0%, #ff9eb5 100%);
      border-radius: 50%;
      opacity: 0.6;
      filter: blur(8px);
      animation: float 20s infinite ease-in-out;
      box-shadow: 0 4px 8px rgba(255, 105, 180, 0.15);

      &:nth-child(1) {
        width: 120px;
        height: 120px;
        top: 10%;
        left: 10%;
        animation-delay: 0s;
        animation-duration: 18s;
      }

      &:nth-child(2) {
        width: 80px;
        height: 80px;
        top: 20%;
        right: 15%;
        animation-delay: 2s;
        animation-duration: 22s;
      }

      &:nth-child(3) {
        width: 160px;
        height: 160px;
        bottom: 15%;
        left: 15%;
        animation-delay: 4s;
        animation-duration: 25s;
      }

      &:nth-child(4) {
        width: 100px;
        height: 100px;
        bottom: 20%;
        right: 10%;
        animation-delay: 6s;
        animation-duration: 20s;
      }

      &:nth-child(5) {
        width: 70px;
        height: 70px;
        top: 40%;
        left: 30%;
        animation-delay: 8s;
        animation-duration: 23s;
      }

      &:nth-child(6) {
        width: 130px;
        height: 130px;
        top: 50%;
        right: 25%;
        animation-delay: 10s;
        animation-duration: 19s;
      }
    }
  }

  @keyframes float {
    0% {
      transform: translateY(0) rotate(0deg);
    }

    25% {
      transform: translateY(-20px) rotate(5deg);
    }

    50% {
      transform: translateY(0) rotate(0deg);
    }

    75% {
      transform: translateY(20px) rotate(-5deg);
    }

    100% {
      transform: translateY(0) rotate(0deg);
    }
  }

  // 主内容区域
  .content {
    position: relative;
    z-index: 2;
    background-color: rgba(255, 255, 255, 0.85);
    border-radius: 20px;
    padding: 25px;
    box-shadow: 0 10px 30px rgba(255, 105, 180, 0.15);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 182, 193, 0.3);

    .header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 25px;

      .title {
        font-size: 24px;
        font-weight: 600;
        color: #ff5c8d;
        display: flex;
        align-items: center;

        .title-emoji {
          font-size: 28px;
          margin-right: 10px;
          animation: pulse 2s infinite alternate;
        }
      }

      .actions {
        display: flex;
        align-items: center;
        gap: 15px;

        .show-all,
        .clear-all {
          display: flex;
          align-items: center;
          gap: 8px;
          background-color: #fff5f8;
          color: #ff80ab;
          padding: 8px 16px;
          border-radius: 10px;
          font-weight: 500;
          cursor: pointer;
          transition: all 0.3s;
          border: 1px solid rgba(255, 182, 193, 0.5);

          &:hover {
            background-color: #ffebf0;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(255, 105, 180, 0.1);
          }

          .icon {
            font-size: 16px;
          }
        }

        .search-box {
          position: relative;

          input {
            width: 200px;
            height: 38px;
            padding: 0 15px 0 40px;
            border: 1px solid rgba(255, 182, 193, 0.5);
            border-radius: 10px;
            background-color: #fff5f8;
            color: #ff5c8d;
            transition: all 0.3s;

            &:focus {
              outline: none;
              border-color: #ff80ab;
              box-shadow: 0 0 0 3px rgba(255, 128, 171, 0.2);
              width: 250px;
            }

            &::placeholder {
              color: #ffb1c1;
            }
          }

          .search-icon {
            position: absolute;
            left: 12px;
            top: 50%;
            transform: translateY(-50%);
            color: #ff80ab;
            font-size: 16px;
          }
        }
      }
    }

    .body {
      display: flex;
      gap: 20px;

      .timeline {
        width: 150px;
        flex-shrink: 0;

        .time-item {
          display: flex;
          align-items: center;
          padding: 10px;
          border-radius: 10px;
          margin-bottom: 10px;
          cursor: pointer;
          transition: all 0.3s;
          color: #ff80ab;

          .time-dot {
            width: 10px;
            height: 10px;
            background-color: #ffb1c1;
            border-radius: 50%;
            margin-right: 10px;
            transition: all 0.3s;
          }

          &:hover {
            background-color: rgba(255, 179, 198, 0.15);
            color: #ff5c8d;

            .time-dot {
              transform: scale(1.2);
              box-shadow: 0 0 8px rgba(255, 92, 141, 0.4);
            }
          }

          &.active {
            background-color: rgba(255, 179, 198, 0.25);
            color: #ff5c8d;
            font-weight: 600;

            .time-dot {
              transform: scale(1.2);
              box-shadow: 0 0 8px rgba(255, 92, 141, 0.4);
              background-color: #ff5c8d;
            }
          }
        }
      }

      .history-list {
        flex: 1;
        overflow-y: auto;

        .time-group {
          margin-bottom: 30px;

          .time-label {
            display: flex;
            align-items: center;
            font-size: 18px;
            font-weight: 600;
            color: #ff5c8d;
            margin-bottom: 15px;
            padding-bottom: 8px;
            border-bottom: 2px dashed rgba(255, 182, 193, 0.5);

            .label-emoji {
              font-size: 22px;
              margin-right: 10px;
            }
          }
        }

        .all-histories {
          background-color: rgba(255, 240, 245, 0.6);
          border-radius: 12px;
          padding: 20px;
          border: 1px solid rgba(255, 182, 193, 0.3);

          .all-header {
            display: flex;
            align-items: center;
            font-size: 18px;
            font-weight: 600;
            color: #ff5c8d;
            margin-bottom: 20px;

            .all-emoji {
              font-size: 22px;
              margin-right: 10px;
              animation: pulse 2s infinite alternate;
            }

            .all-count {
              margin-left: auto;
              font-size: 14px;
              background-color: #ffebf0;
              padding: 4px 10px;
              border-radius: 100px;
              color: #ff80ab;
            }
          }
        }

        .video-grid {
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
          gap: 20px;

          .video-item {
            background-color: rgba(255, 255, 255, 0.8);
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(255, 92, 141, 0.1);
            transition: all 0.3s;
            border: 1px solid rgba(255, 182, 193, 0.3);
            position: relative;

            &:hover {
              transform: translateY(-5px);
              box-shadow: 0 8px 20px rgba(255, 92, 141, 0.25);

              .video-cover {
                img {
                  transform: scale(1.05);
                }

                .play-btn {
                  transform: translate(-50%, -50%) scale(1);
                  opacity: 1;
                }
              }

              .delete-btn {
                opacity: 1;
              }
            }

            .video-cover {
              position: relative;
              height: 160px;
              overflow: hidden;

              img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                transition: transform 0.5s ease;
              }

              .video-duration {
                position: absolute;
                bottom: 10px;
                right: 10px;
                background-color: rgba(0, 0, 0, 0.6);
                color: white;
                font-size: 12px;
                padding: 2px 8px;
                border-radius: 4px;
              }

              .play-btn {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%) scale(0.8);
                width: 50px;
                height: 50px;
                background-color: rgba(255, 92, 141, 0.8);
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                opacity: 0;
                transition: all 0.3s;
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

                .play-icon {
                  color: white;
                  font-size: 24px;
                  margin-left: 4px;
                }
              }
            }

            .video-info {
              padding: 15px;

              .video-title {
                font-size: 16px;
                font-weight: 600;
                color: #ff5c8d;
                margin-bottom: 10px;
                line-height: 1.4;
                height: 44px;
                overflow: hidden;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                cursor: pointer;

                &:hover {
                  color: #ff3d7f;
                }
              }

              .video-data {
                display: flex;
                justify-content: space-between;
                font-size: 13px;

                .video-author {
                  color: #ff80ab;
                  font-weight: 500;
                }

                .video-time {
                  color: #ffb1c1;
                }
              }
            }

            .delete-btn {
              position: absolute;
              top: 10px;
              right: 10px;
              width: 28px;
              height: 28px;
              background-color: rgba(255, 255, 255, 0.8);
              border-radius: 50%;
              display: flex;
              align-items: center;
              justify-content: center;
              cursor: pointer;
              opacity: 0;
              transition: all 0.3s;

              &:hover {
                background-color: #ff5c8d;
                transform: rotate(90deg);

                .delete-icon {
                  color: white;
                }
              }

              .delete-icon {
                color: #ff5c8d;
                font-size: 12px;
              }
            }
          }
        }

        .empty-history {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          padding: 60px 0;

          .empty-icon {
            font-size: 60px;
            margin-bottom: 20px;
            animation: float 3s infinite ease-in-out;
            color: #ffb1c1;
          }

          .empty-text {
            font-size: 20px;
            font-weight: 600;
            color: #ff5c8d;
            margin-bottom: 10px;
          }

          .empty-subtext {
            font-size: 16px;
            color: #ff80ab;
          }
        }
      }
    }
  }

  // 动画效果
  @keyframes pulse {
    0% {
      transform: scale(1);
    }

    100% {
      transform: scale(1.1);
    }
  }

  .anime-pop-in {
    animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    opacity: 0;
    transform: scale(0.8);
  }

  @keyframes popIn {
    0% {
      opacity: 0;
      transform: scale(0.8);
    }

    100% {
      opacity: 1;
      transform: scale(1);
    }
  }

  // 清空确认对话框
  .clear-dialog {
    :deep(.el-dialog__header) {
      background-color: #ffebf0;
      padding: 15px 20px;
    }

    :deep(.el-dialog__title) {
      color: #ff5c8d;
      font-weight: 600;
    }

    .dialog-content {
      padding: 30px 20px;
      text-align: center;

      .warning-text {
        font-size: 16px;
        color: #ff5c8d;
      }
    }

    :deep(.dialog-footer) {
      display: flex;
      justify-content: center;
      gap: 15px;
      padding: 0 0 20px;

      .cancel-btn {
        background-color: #fff5f8;
        border-color: #ff80ab;
        color: #ff80ab;

        &:hover {
          background-color: #ffebf0;
          color: #ff5c8d;
        }
      }

      .confirm-btn {
        background-color: #ff5c8d;
        border-color: #ff5c8d;
        color: #fff;

        &:hover {
          background-color: #ff3d7f;
          border-color: #ff3d7f;
        }
      }
    }
  }

  // 响应式
  @media (max-width: 1400px) {
    .video-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  @media (max-width: 1100px) {
    .video-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (max-width: 768px) {
    width: 95%;

    .content {
      .header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;

        .actions {
          width: 100%;
          justify-content: space-between;

          .search-box {
            width: 100%;
          }
        }
      }

      .body {
        flex-direction: column;

        .timeline {
          width: 100%;
          display: flex;
          justify-content: space-between;
          margin-bottom: 20px;

          .time-item {
            margin-bottom: 0;
            flex: 1;
            justify-content: center;
          }
        }

        .history-list {
          .video-grid {
            grid-template-columns: 1fr;
          }
        }
      }
    }
  }
}
</style>
